<template>
  <div class="list">
    <title class="title">头部</title>
    <div class="pulldownup-box">
      <z-pulldownup :page="listOp.page" :total="listOp.total" :list="listOp.list" @pullDown="pullDown" @pullUp="pullUp" @scroll="scroll">
        <ul class="content">
          <li v-for="(item, i) of listOp.list" :key="i" @click="goDetail(item)">I am item {{ item }}</li>
        </ul>
      </z-pulldownup>
    </div>
  </div>
</template>

<script>
export default {
  name: 'list'
}
</script>
<script setup>
import { reactive, onMounted, onActivated, onDeactivated } from 'vue'
import { useRouter } from 'vue-router'
import store from '@/store'
const router = useRouter()

// 列表配置项
const listOp = reactive({
  list: [],
  page: 1,
  total: 0,
  bs: null,
  scrollY: 0,
  scrollYNew: 0
})

onMounted(() => {
  store.keepAlive.SET_KEEP_ALIVE('list') // 缓存列表组件
})
onActivated(() => {
  listOp.bs.refresh()
  listOp.bs.scrollTo(0, listOp.scrollYNew, 300)
})
onDeactivated(() => {
  listOp.scrollYNew = listOp.scrollY
})

// 获取数据
async function getData() {
  setTimeout(() => {
    const data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]
    listOp.total = 5
    if (listOp.page === 1) {
      listOp.list = []
    }
    listOp.list = [...listOp.list, ...data]
  }, 1500)
}
// 下拉刷新
function pullDown() {
  listOp.page = 1
  getData()
}
// 上拉加载
function pullUp() {
  listOp.page++
  getData()
}
// 滚动事件
function scroll(y, bscroll) {
  listOp.scrollY = y
  listOp.bs = bscroll
}
// 跳转到详情页
function goDetail(item) {
  router.push({
    name: 'listDetail',
    params: item
  })
}
</script>

<style lang="scss" scoped>
.list {
  height: 100%;
  .title {
    height: 50px;
    border-bottom: 1px solid #efefef;
    @include flex();
  }
  .pulldownup-box {
    height: calc(100% - 100px);
    .content {
      padding: 0 10px;
      > li {
        padding: 10px;
        border-bottom: 1px solid #ccc;
      }
    }
  }
}
</style>
